<template>
  <div id="cust_orderdetail">
    <header>
      <i @click="goBack()"></i>
      <div>订单详情</div>
    </header>
    <ul class="list">
      <div class='mc' v-if="list.length<1">
        <!-- <img src="../../image/no_collection@2x.png" width='110' alt=""> -->
        <p>您没有选择相关医生</p>
      </div>
      <li>
        <a style=" justify-content: space-between;">
          <ul>
            <li>
              所选医生:
            </li>
          </ul>
        </a>
      </li>
      <li>
        <a>
          <i>姓名</i>
          <i>好评率</i>
          <i>地区</i>
          <!-- <i>编辑</i> -->
        </a>
      </li>
      <li v-for="(item,index) in list" :key='index'>
        <a>
          <i>{{item.name}}</i>
          <span style="color:rgb(231, 154, 9)" v-if="item.favorable_rate<='2'">☆☆</span>
          <span style="color:rgb(231, 154, 9)" v-if="item.favorable_rate=='3'">☆☆☆</span>
          <span style="color:rgb(231, 154, 9)" v-if="item.favorable_rate=='4'">☆☆☆☆</span>
          <span style="color:rgb(231, 154, 9)" v-if="item.favorable_rate=='5'">☆☆☆☆☆</span>
          <i>{{item.area}}</i>
          <!-- <i @click=pinglun(item.id)>评价</i> -->
        </a>
      </li>
    </ul>
    <div class="mcComment" v-show="isShowComment" @click.stop='isShowComment=false'>
        <div class='bottom'>
          <div class="gradebox" v-show='gradeStatus'>
            <span>用户打分:</span>
            <el-rate v-model="gradeValue" text-color="#ff9900" score-template="{value}" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :disabled="iscomment"
              @change="rate(gradeValue)">
            </el-rate>
          </div>
          <!--如果用原生js实现此功能比较麻烦-->
          <div class="pinglun">
            <span style="width:100px">用户评论:</span>
            <input type="text" v-model='chatContent' style="border: transparent;
            width: 100%;">
          </div>
          <a class="send" @click.stop='sendComment()'>
            提 交
          </a>
        </div>
      </div>
  </div>
</template>
<script>
  import {
    Loadmore
  } from 'mint-ui';
  export default {
    data() {
      return {
        gradeStatus: true, //用户是否打过分 默认没打过
        iscomment: false, //是否评价过 默认否
        isShowComment: false, //是否显示评论框
        chatContent: '满意,沟通表达清晰,服务态度满意 ,治疗过程满意', //我发表的评论
        gradeValue: 4,
        gradeScore: 4, //综合评分
        docArr: '', //医生id数组
        list: [], //医生数组

        addlist: [{
            content: '非常不满意, 沟通表达待提升,服务态度待提升,治疗过程待提升',
            show: false
          },
          {
            content: '不满意,沟通表达待提升,服务态度待提升,治疗过程待提升',
            show: false
          },
          {
            content: '一般,沟通表达一般,服务态度一般,治疗过程一般',

            show: false
          },
          {
            content: '满意,沟通表达清晰,服务态度满意 ,治疗过程满意',
            show: false
          },
          {
            content: '非常满意,沟通表达清晰,服务态度满意 ,治疗过程满意',
            show: true
          }
        ], //添加评论
      }
    },
    components: {
      Loadmore,
    },
    methods: {
      goBack() {
        this.$router.back();
      },
        //评分
        rate(e) {
        this.addlist.forEach((element, i) => {
          element.show = false
          if ((e - 1) == i) {
            element.show = true
            this.chatContent = element.content
          }
        });
      },
      sendComment(){

      },
      getList() {
        this.docArr = this.$route.query.docArr.split(',');
        this.docArr.forEach((val, index) => {
          this.$api.get(this.$api.baseURLSchool, "select_cid/doctor/" + val, {}, r => {
            if (r.data.ret == 1) {
              this.list.push(r.data.info);
            }

          }, err => {
            console.log(err);
          })
        });
      },
      pinglun(i) {
        this.isShowComment=true;

      }
    },
    created() {
      this.getList();
    },
    mounted() {}
  }

</script>
<style lang="scss" scoped>
  .mc {
    padding: 40px 0;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);

    img {
      display: block;
      margin: 0 auto;
    }
    p {
      padding-top: 10px;
      text-align: center;
    }
  }
  #cust_orderdetail ul.list > li > a{
    justify-content: space-around;

  }
  .mcComment{
      position: absolute;
      top: 50%;
      width: 100%;
      padding-left: 15px;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      input{
          background:transparent;
      }
  }
  .send{
    background: red;
    padding: 6px;
    border-radius: 5px;
    float: right;
    margin-right: 25px;
    margin-top: 10px;
  }

</style>
